<template>
  <div>
    <div class="good-manager-item" v-for="(item,index) in categoryList" :key="item.id" @click="goDetail(item,index)">
      <div :class="['good-content', 'display-flex', index!=categoryList.length-1?'vux-1px-b':'']">
        <div>
          <img class="good-pic" v-lazy="yasuo(item.defaultPhoto)" alt="">
        </div>
        <div class="flex-1 display-flex flex-direction-column justify-content-flex-justify">
          <div>
            <div class="good-name beyond-one">[{{item.brandName}}]{{item.name}}</div>
            <div class="good-spec">{{item.spec}}</div>
            <div class="min-spec" v-if="item.detail">{{item.detail}}</div>
          </div>

          <div class="priceList" v-for="(obj,objIndex) in item.categoryPrices" v-if="item.categoryPrices &&item.enquiry==0">
            <div class="display-flex" v-if="objIndex<5">
              <span  class="customer-type-lable beyond-one">{{obj.customerCategoryName}}</span>
              <span v-for="objItem in obj.unitPriceList">
                 <span class="redTip">&yen;{{objItem.unitPrice}}</span>
              <span>/{{objItem.unitName}}</span>

              </span>

            </div>
          <!--  <div v-if="obj.customerCategoryType==1">
              <span v-text="">批发价</span>
              <span v-for="objItem in obj.unitPriceList">
                 <span class="redTip">&yen;{{objItem.unitPrice}}</span>
              <span>/{{objItem.unitName}}</span>

              </span>

            </div>-->
          </div>

          <div class="priceList" v-if="item.enquiry==1">
            <span class="grayTip">询价</span>
          </div>
          <!--<div class="priceList">-->
          <!--<span>批发价</span>-->
          <!--<span class="redTip">&yen;10</span>-->
          <!--<span>/包</span>-->
          <!--<span class="redTip">&yen;10</span>-->
          <!--<span>/件</span>-->
          <!--</div>-->

          <div class="display-flex justify-content-flex-justify align-items-center">
            <div>

              <div class="good-unit">
                <span class="lable">库存: {{item.goodsStock>0?item.goodsStock:0}}{{item.baseUnitName}}</span>
                <span class="lable">总销量: {{item.salesVolume}}{{item.baseUnitName}}</span>
              </div>
            </div>
            <div class="edit-good">
              <img class="icon-edit" @click.stop="showMenu(item,index)"
                   src="../assets/img/customer/edit_good_manager.png" alt="">
              <!--<span @click.stop="showDialog(item)">-->
                <!--<img class="icon-move" src="../assets/img/customer/move.png" alt="">-->
                <!--<span class="move-lable">移至</span>-->
              <!--</span>-->
              <div class="pop" v-show="item.expand">
                <div>
                  <div class="pop-top"></div>
                </div>
                <ul class="pop-content">
                  <li @click.stop="itemClick(item,1,index)" v-if="erpStatus != 1">库存设置</li>
                  <li @click.stop="itemClick(item,2,index)">价格设置</li>
                  <li @click.stop="itemClick(item,3,index)">{{item.goodsState==1?'下架':'上架'}}</li>
                  <li v-if="item.goodsState!=1" @click.stop="goEdit(item,index)">修改信息</li>
                  <li v-if="item.goodsState==1" @click.stop="goShare(item,index)">分享</li>
                  <li v-if="useType==2" @click.stop="showDialog(item)">移至</li>
                  <li  v-if="useType==2" @click.stop="goodToFirst(item,index)">{{item.isTop==1?'取消置顶':'置顶'}}</li>
                  <li v-if="item.goodsState==0" @click.stop="deleteGoods(item,index)">删除</li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-transfer-dom v-if="checkListArray&&checkListArray.length>0">
      <x-dialog v-model="dialog" :hide-on-blur="true" @on-hide="hideDialog">
        <div class="category-dialog">
          <scroller>
            <div class="content">
              <checklist :max="1" :options="checkListArray" v-model="checkValue"></checklist>
            </div>
          </scroller>
        </div>
        <div class="btn-comfirm-container">
          <span class="btn-comfirm align-items-center display-flex justify-content-flex-center"
                @click="closeDialog">确定</span>
        </div>
      </x-dialog>

    </div>
  </div>

</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      currentIndex:Number,
      list: Array,
      useType: {
        default: 1,
        type: Number
      },
      isZone: {
        default: false,
        type: Boolean
      },
      erpStatus: String,
      checkListArray: Array
    },
    data() {
      return {
        show: false,
        lastSelectIndex: -1,
        categoryList: [],
        currentItem: null,
        dialog: false,
        checkValue: [],
        index:this.currentIndex
      }
    },
    created() {
      if (this.list && this.list.length > 0) {
        this.categoryList = this.list;
      }
    },
    watch: {
      list: function (newVal, oldVal) {
        this.categoryList = newVal;
      },
      currentIndex:function (newVal, oldVal) {
        this.index = newVal;
      } 
    },
    methods: {
      yasuo(img){
        console.log("img.indexOf('?')",img.indexOf('?'))
        return img.indexOf('?')==-1?img+"?yasuo":img;
      },
      showMenu(item, index) {
        if (this.lastSelectIndex == -1) {
          this.lastSelectIndex = index;
          item.expand = !item.expand;
          this.$set(this.categoryList, this.lastSelectIndex, item)
        } else {
          if (this.lastSelectIndex != index && this.lastSelectIndex < this.categoryList.length) {
            this.categoryList[this.lastSelectIndex].expand = false;
            this.$set(this.categoryList, this.lastSelectIndex, this.categoryList[this.lastSelectIndex])
            item.expand = !item.expand;
            this.lastSelectIndex = index;
            this.$set(this.categoryList, index, item)
          } else {
            this.lastSelectIndex = index;
            item.expand = !item.expand;
            this.$set(this.categoryList, this.lastSelectIndex, item)
          }

        }
      },
      upOrDown(item,index) {
        this.$ajax.post("goods/upOrDown", {goodsIdList: item.id, state: item.goodsState == 1 ? 0 : 1}, (res) => {
          console.log("====res", res);
          if (res.code == 200) {
            if (item.goodsState == 1) {
              item.goodsState=0;
              this.$vux.toast.text("下架成功", 'center');
            } else {
              item.goodsState=1;
              this.$vux.toast.text("上架成功", 'center');
            }
           // this.$emit("refeshData")
            if(this.index==3||this.index==0){//未上架/下架tab
              this.list.splice(index,1);
            }

            if (this.$fromApp(this)) {
              this.$callJava({code:1017,noBack:true})
            }
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        });

      },
      deleteGoods(item,index){
        this.$ajax.get("goods/delete",(res)=>{
          if(res.code == 200){
            this.categoryList.splice(index,1);
            this.$vux.toast.text("删除成功", 'center');
            if (this.$fromApp(this)) {
              this.$callJava({code:1017,noBack:true})
            }
          }else{
            this.$vux.toast.text(res.msg, 'center');
          }
        },{goodsId:item.id});
      },
      itemClick(item, type, index) {
        if (type == 1) {
          if (this.$fromApp(this)) {
            this.$callJava({
              url: this.$webUrl + "kucun/setting?from=app&flag="+item.zeroSaleFlag+"&stock=" + item.goodsStock + "&rate=" + item.rate + "&goodsId=" + item.id + "&Authorization=" + this.$storage.get("token") + "&spec=" + encodeURIComponent(this.$transSpecial(item.spec)) + "&brandName=" + encodeURIComponent(this.$transSpecial(item.brandName)) + "&name=" + encodeURIComponent(this.$transSpecial(item.name)),
              title: "库存设置"
            })
          } else {
            this.$router.push({
              path: '/kucun/setting',
              query: {
                goodsId: item.id,
                stock: item.goodsStock,
                rate: item.rate,
                flag:item.zeroSaleFlag,
                name: encodeURIComponent(this.$transSpecial(item.name)),
                spec: encodeURIComponent(this.$transSpecial(item.spec)),
                brandName: encodeURIComponent(this.$transSpecial(item.brandName)),


              }
            })
          }

        } else if (type == 2) {
          if (this.$fromApp(this)) {
            this.$callJava({
              url: this.$webUrl + "price/setting?from=app&goodsId=" + item.id + "&spec=" + encodeURIComponent(this.$transSpecial(item.spec)) + "&brandName=" + encodeURIComponent(this.$transSpecial(item.brandName)) + "&name=" + encodeURIComponent(this.$transSpecial(item.name)) + "&Authorization=" + this.$storage.get("token"),
              title: "价格设置"
            })
          } else {
            this.$router.push({
              path: '/price/setting',
              query: {
                goodsId: item.id,
                name: encodeURIComponent(this.$transSpecial(item.name)),
                spec: encodeURIComponent(this.$transSpecial(item.spec)),
                brandName: encodeURIComponent(this.$transSpecial(item.brandName))
              }
            })
          }
        } else if (type == 3) {
          if (item.goodsState == 1 && item.hasActivity) {
            let that = this;
            this.$vux.confirm.show({
              title: '提示',
              content: '该商品处于（特价/搭赠）活动中，是否下架？',
              onCancel() {
              },
              onConfirm() {
                that.upOrDown(item,index)
              }
            })
          } else {
            this.upOrDown(item,index);
          }
        }
        item.expand = false;
        this.$set(this.categoryList, index, item);
      },
      showDialog(item) {
        console.log("=====item", item);
        this.currentItem = item;
        this.dialog = true;
        this.checkValue = [item.goodsCategoryId];
        this.ModalHelper.afterOpen()
      },
      closeDialog() {
        this.ModalHelper.beforeClose();
        this.dialog = false;
        if (this.checkValue.length > 0) {
          this.$ajax.post("goods/transfer/category", {
            goodsIdList: this.currentItem.id,
            to: this.checkValue[0]
          }, (res) => {
            if (res.code == 200) {
              this.categoryList[this.lastSelectIndex].expand = false;
              this.$vux.toast.text('操作成功', 'center');
              this.$emit("dialogComfrim", {});

              if (this.$fromApp(this)) {
                this.$callJava({code:1017,noBack:true})
              }
            } else {
              this.$vux.toast.text(res.msg, 'center');
            }
          })
        }
      },
      hideDialog(){
        this.ModalHelper.beforeClose();
      },
      goDetail(item, index) {
        console.log("===", this.lastSelectIndex)
        if (this.lastSelectIndex >= 0 && this.lastSelectIndex < this.categoryList.length) {
          if (this.categoryList[this.lastSelectIndex].expand) {
            this.categoryList[this.lastSelectIndex].expand = false;
            this.$set(this.categoryList, this.lastSelectIndex, this.categoryList[this.lastSelectIndex])
            return;
          }
        }

        if (this.$fromApp(this)) {
          this.$callJava({
            url: this.$webUrl + "good/detail?from=app&id=" + item.id + "&Authorization=" + this.$storage.get("token"),
            title: "商品详情"
          })
        } else {
          this.$router.push({path: '/good/detail', query: {id: item.id}})
        }
      },
      goEdit(item, index) {
        console.log("===",item,"===index",index);
        this.showMenu(item, index);
        this.$callJava({
          title: "编辑商品",
          code: 1014,
          data: {
            goods: item,
            token: this.$storage.get("token")

          }

        })

      },
      goShare(item, index) {
        this.showMenu(item, index);
        // this.$emit("on-share",item)
        let opt = {
          code: 1015,
          goodsTitle: `[${item.brandName}]${item.name}${item.spec}`,
          goodsLink: this.$webUrl + 'good/operate?goodId=' + item.id,
          goodsImg: item.defaultPhoto
        }
        this.$callJava(opt)
      },
        goodToFirst(item,index){
            this.$ajax.post("goods/shop/update/isTop", {goodsId: item.id, isTop: item.isTop == 0 ? 1 : 0}, (res) => {
                console.log("====res", res);
                if (res.code == 200) {
                    if (item.isTop == 1) {
                        item.isTop=0;
                        this.$vux.toast.text("取消置顶成功", 'center');
                    } else {
                        item.isTop=1;
                        this.$vux.toast.text("置顶成功", 'center');
                    }
                  if(this.$fromApp(this)){
                    this.$callJava({code:1017,noBack:true})
                  }
                    item.expand = false;
                    this.$set(this.categoryList, index, item);
                    this.$emit("refeshData")
                } else {
                    this.$vux.toast.text(res.msg, 'center');
                    item.expand = false;
                    this.$set(this.categoryList, index, item);
                }
            });

        }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .good-manager-item {
    position: relative;
    background: #fff;
    .customer-type-lable{
      width: 1.1rem;
    }
    .good-content {
      padding: .3rem 0rem 0.2rem 0rem;
      margin: 0 .3rem 0 .3rem;
    }
    .good-pic {
      width: 1.84rem;
      height: 1.84rem;
      margin-right: .24rem;
    }
    .good-name {
      font-size: .28rem;
      color: rgba(34, 34, 34, 1);
      position: relative;
      top: -3px;
    }
    .good-spec {
      box-sizing: border-box;
      display: inline-block;
      min-height: .32rem;
      background: #eee;
      border-radius: .16rem;
      font-size: .2rem;
      padding: .005rem .2rem;
      color: #999;
      margin-bottom: .15rem;
    }
    .min-spec{
      box-sizing: border-box;
      display: inline-block;
      min-height: .32rem;
      border-radius: .16rem;
      font-size: .2rem;
      padding: .005rem .2rem;
      color: #999;
      margin-bottom: .15rem;
      border: 1px solid #ddd;
    }
    .good-unit {

      font-size: 0.24rem;
      color: #999;
      margin-bottom: .05rem;
      .lable {
        margin-right: .4rem;
      }
    }
    .icon-edit {
      width: .52rem;
      height: .52rem;
    }
    .icon-move {
      width: .3rem;
      height: .3rem;
      vertical-align: middle;
    }
    .move-lable {
      font-size: .28rem;
      color: #333;
      margin-left: .1rem;
      vertical-align: middle;
    }
    .priceList {
      color: #222222;
      font-size: 0.24rem;
      .redTip {
        color: #FB6E52;
        margin-left: .2rem;
      }
      .grayTip {
        color: #666666;
        font-size: .28rem;
      }
    }
  }

  .edit-good {
    position: relative;
  }

  .pop {
    width: 2.2rem;
    z-index: 999;
    right: 0rem;
    position: absolute;
    .pop-top {
      position: relative;
      left: 1.6rem;
      text-align: right;
      border-style: solid;
      border-width: 0px 10px 10px 10px;
      border-color: transparent transparent #222 transparent;
      width: 0px;
      height: 0px;
    }
    .pop-content {
      border-radius: .1rem;
      background: #222;
      ul {
        list-style-type: none;
      }
      li {
        padding: .2rem 0;
        text-align: center;
        list-style: none;
        color: #fff;
      }
    }

  }

  .category-dialog {
    position: relative;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    height: 3.72rem;
    overflow: scroll;
    padding-left: 0.4rem;
    padding-top: 0.5rem;
    /deep/ .weui-cell__bd p {
      text-align: left;
      padding-left: 0.4rem;
      font-size: 0.34rem;
      color: #333;
    }
    /deep/ .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
      color: #FF3B47;
    }
    /deep/ .weui-cells:before, /deep/ .weui-cell:before, /deep/ .weui-cells:after {
      border: none;
    }
  }

  .btn-comfirm-container {
    text-align: right;
    margin-right: .6rem;
  }

  .btn-comfirm {
    display: inline-block;
    margin: .2rem 0rem;
    height: .6rem;
    padding: 0.1rem .9rem;
    background: #527DD9;
    border-radius: .6rem;
    color: #fff;
    font-size: .34rem;
  }

</style>
